<template>
  <div class="container">

    <div class="modal fade" id="addOrUpdateModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">{{ form.id === '' ? '添加支付方式' : '编辑支付方式' }}</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form class="profile-form">
              <div class="mb-3">
                <label for="name" class="form-label">方式名称</label>
                <input v-model="form.name" type="text" class="form-control" id="name" placeholder="首页支付方式的显示名称">
              </div>

              <div class="mb-3">
                <label for="code" class="form-label">方式代码</label>
                <input v-model="form.code" type="text" class="form-control" id="code" placeholder="支付接口的方式代码">
              </div>

              <div class="mb-3">
                <label for="style" class="form-label">方式样式</label>
                <input v-model="form.style" type="text" class="form-control" id="style" placeholder="首页支付方式的样式代码(class)">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button @click="submit()" type="button" class="btn btn-primary " data-bs-dismiss="modal">
              {{ form.id === '' ? '添加' : '更新' }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-header">
        支付方式列表
        <button @click="add" class="float-end btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addOrUpdateModal">
          添加
        </button>
      </div>
      <div class="card-body">

        <div class="table-responsive">
          <table class="table">
            <thead>
            <tr>
              <th>#</th>
              <th>名称</th>
              <th>CODE</th>
              <th>样式</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            </thead>

            <tbody>
            <template v-for="type in typeList">
              <tr>
                <th scope="row" v-text="type.id"></th>
                <td v-text="type.name"></td>
                <td v-text="type.code"></td>
                <td v-text="type.style"></td>
                <td v-text="type.createdAt"></td>
                <td>
                  <div class="btn-group">
                    <button @click="edit(type)" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addOrUpdateModal">
                      编辑
                    </button>
                    <button @click="del(type.id)" type="button" class="btn btn-danger">删除</button>
                  </div>
                </td>
              </tr>
            </template>
            </tbody>

          </table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import request from '@/http/request'
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  name: 'Type',
  data() {
    return {
      form: {
        id: '',
        name: '',
        code: '',
        style: '',
      },

      typeList: [],
    }
  },

  methods: {
    getPage() {
      request.getTypePage(1, 10).then(response => {
        this.typeList = response.data.result.page.records
      }).catch(error => {
        ElMessage.error('获取列表失败')
      })
    },

    add() {
      this.form.id = ''
      this.form.name = ''
      this.form.code = ''
      this.form.style = ''
    },

    edit(type) {
      this.form.id = type.id
      this.form.name = type.name
      this.form.code = type.code
      this.form.style = type.style
    },

    del(id) {
      ElMessageBox.confirm('确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '算了',
        type: 'error',
      }).then(() => {
        request.delType(id).then(response => {
          this.getPage()
          ElMessage.success(response.data.message)
        }).catch(error => {
          ElMessage.error('删除失败')
        })
      })
    },

    submit() {
      request.addOrUpdateType(this.form).then(response => {
        ElMessage.success(response.data.message)
        this.getPage()
      }).catch(error => {
        ElMessage.error(error.response.data.message)
      })
    },
  },

  created() {
    this.getPage()
  },
}
</script>

<style scoped>

</style>